import {Image, Swiper, SwiperItem, View} from '@tarojs/components'
import WaterTarget from './waterTarget'
import './index.scss'
import DeviceCount from './deviceCount'
import CountCheckTime from './countCheckTime'
import AbnormalMsg from './abnormalMsg'
import ParamsCard from './paramsCard'
import {iconUrl, imagesUrl} from '@/utils/baseUrl'
import {SimpleParamsCard} from './simpleParamsCard'
import {toEchartsSingleDevParamsAnalyze} from '@/utils/pageRedirect'
import {useContext} from 'react'
import scanStore from '@/store/scan'

const SingleDevCardLoading: React.FC = (): JSX.Element => {
  return (
    <View className="devCard flex-1 flex flex-col">
      {/* 水质指标栏 */}
      <View className="mx-auto">
        <WaterTarget
          textColor="#fff"
          borderColor="#fff"
          lightBorderColor="#ffffff33"
          textShadow="0px 2px 3px #0070E3"
        ></WaterTarget>
      </View>
      {/* 设备数量栏 */}
      <DeviceCount></DeviceCount>
      {/* 累计检测栏 */}
      <CountCheckTime></CountCheckTime>
      {/* 报警栏 */}
      <AbnormalMsg devId={0}></AbnormalMsg>

      {/* 参数卡片栏 */}
      <Swiper vertical={true} className="flex-1 mt-12">
        <SwiperItem className="flex justify-center items-center px-16 pb-16">
          {/* 参数卡片栏 */}
          <ParamsCard></ParamsCard>
        </SwiperItem>
      </Swiper>
      {/* <View>111</View> */}
    </View>
  )
}

export const SingleDevCard: React.FC<{
  devList: HomeStore.DevInfo[]
  loading?: boolean
  devSwiperChange?: HomeStore.DevSwiperChange
  swiperCurrent: number
  swiperCurrentData?: Device.DevDetailData
  changeDevListShowType: HomeStore.ChangeDevListShowType
}> = ({
  loading,
  devList,
  changeDevListShowType,
  devSwiperChange,
  swiperCurrent,
  swiperCurrentData
}): JSX.Element => {
  if (loading) {
    return <SingleDevCardLoading></SingleDevCardLoading>
  } else {
    return (
      <View className="flex-1 devCard flex flex-col">
        {/* 水质指标栏 */}
        <View className="mx-auto">
          <WaterTarget
            textColor="#fff"
            borderColor="#fff"
            lightBorderColor="#ffffff33"
            textShadow="0px 2px 3px #0070E3"
            value={swiperCurrentData?.devDataStatisticPack.standRatio}
            text={swiperCurrentData?.devDataStatisticPack.checkResult}
          ></WaterTarget>
        </View>

        {/* 设备数量栏 */}
        <DeviceCount
          changeDevListShowType={changeDevListShowType}
          count={devList?.length}
        ></DeviceCount>
        {/* 累计检测栏 */}
        <CountCheckTime
          hours={
            swiperCurrentData?.devDataStatisticPack.totalCheckWorkHour || 0
          }
        ></CountCheckTime>

        {/* 报警栏 */}
        <View className="px-16">
          <AbnormalMsg
            devId={devList?.[swiperCurrent]?.devId || 0}
            warningNum={
              swiperCurrentData?.devDataStatisticPack.reportCount || 0
            }
            abnormalNum={
              swiperCurrentData?.devDataStatisticPack.exceptionCount || 0
            }
          ></AbnormalMsg>
        </View>

        {devList && devList.length ? (
          <Swiper
            current={swiperCurrent}
            vertical={true}
            className="flex-1 mt-12"
            onChange={({detail: {current}}) =>
              devSwiperChange && devSwiperChange(current)
            }
          >
            {devList &&
              devList.map((item, idx) => (
                <SwiperItem
                  className="flex justify-center items-center px-16 pb-16"
                  onClick={() => toEchartsSingleDevParamsAnalyze(item.devId)}
                >
                  {/* 参数卡片栏 */}
                  <ParamsCard
                    devName={item.devName}
                    devStatus={item.devStatus}
                    info={item.devDetailDataList || undefined}
                  ></ParamsCard>
                </SwiperItem>
              ))}
          </Swiper>
        ) : (
          <></>
        )}
      </View>
    )
  }
}

const SimpleListDevCardLoading: React.FC = (): JSX.Element => {
  return (
    <View className="devCard flex-1 flex flex-col">
      {/* 水质分析 检测时间栏 */}
      <View className="w-full h-52 px-26 mb-18 flex justify-start items-center">
        {/* 水质指标 */}
        <WaterTarget
          textColor="#fff"
          borderColor="#fff"
          lightBorderColor="#ffffff33"
          textShadow="0px 2px 3px #0070E3"
          style={{
            width: '104rpx',
            height: '104rpx'
          }}
          valueStyle={{
            fontSize: '40rpx'
          }}
        ></WaterTarget>
        {/* 水质描述 */}
        <View
          className="flex-1 h-17 ml-10 rounded-2"
          style={{
            backgroundColor: '#59ABFF'
          }}
        ></View>
      </View>

      {/* 设备数量栏 */}
      <View className="w-full h-24 px-26 flex justify-between items-center rounded-2">
        <View
          className="w-full h-full"
          style={{
            backgroundColor: '#59ABFF'
          }}
        ></View>
      </View>

      {/* 报警栏 */}
      <AbnormalMsg devId={0} disabled={true}></AbnormalMsg>

      <View className="flex-1 pt-24 overflow-hidden">
        {/* <View className="h-full px-16 overflow-y-auto">
          <SimpleParamsCard></SimpleParamsCard>
        </View> */}
      </View>
    </View>
  )
}

export const SimpleListDevCard: React.FC<{
  simpleDevInfo?: HomeStore.SimpleDevInfo
  loading?: boolean
  changeDevListShowType: HomeStore.ChangeDevListShowType
}> = ({loading, simpleDevInfo, changeDevListShowType}): JSX.Element => {
  if (loading) {
    return <SimpleListDevCardLoading></SimpleListDevCardLoading>
  } else {
    return (
      <View className="flex-1 devCard w-full flex flex-col overflow-hidden">
        {/* 水质分析 检测时间栏 */}
        <View className="w-full h-52 px-26 mb-18 flex justify-start items-center">
          {/* 水质指标 */}
          <WaterTarget
            textColor="#fff"
            borderColor="#fff"
            lightBorderColor="#ffffff33"
            textShadow="0px 2px 3px #0070E3"
            value={simpleDevInfo?.devDataStatisticPack.standRatio}
            style={{
              width: '104rpx',
              height: '104rpx'
            }}
            valueStyle={{
              fontSize: '40rpx'
            }}
          ></WaterTarget>
          {/* 水质描述 */}
          <View
            className="hanzi text-14 ml-10 mr-17 text-white"
            style={{
              textShadow: ' 0px 4rpx 6rpx #0070E3'
            }}
          >
            {simpleDevInfo?.devDataStatisticPack.checkResult}
          </View>
          {/* 累计检测 */}
          <View className="flex items-center">
            <View className="hanzi h-17 leading-17 text-12 mr-6 text-white">
              工作总时长
            </View>
            <View className="notHanzi h-19 leading-17 text-16 font-bold mr-6 text-white">
              {simpleDevInfo?.devDataStatisticPack.totalCheckWorkHour || 0}
            </View>
            <View className="hanzi h-17 leading-17 text-12 text-white">
              小时
            </View>
          </View>
        </View>

        {/* 设备数量栏 */}
        <View className="w-full h-24 px-26 flex justify-between items-center">
          <View className="flex justify-between items-center">
            <View className="hanzi h-17 leading-17 text-12 mr-6 text-white">
              当前设备
            </View>
            <View className="notHanzitext-16 h-19 leading-17 font-bold mr-6  text-white">
              {simpleDevInfo?.devList.length || 0}
            </View>
            <View className="hanzi h-17 leading-17 text-12 mr-6 text-white">
              台
            </View>
          </View>

          <View className="h-24 flex">
            <Image
              src={iconUrl('device-listType-singleDev.png')}
              className="w-24 h-24 mr-10"
              onClick={() => changeDevListShowType('single')}
            ></Image>
            <Image
              src={iconUrl('device-listType-simpleList.png')}
              className="w-24 h-24 opacity-40"
            ></Image>
          </View>
        </View>

        {/* 报警栏 */}
        <AbnormalMsg
          devId={0}
          warningNum={simpleDevInfo?.devDataStatisticPack.reportCount || 0}
          abnormalNum={simpleDevInfo?.devDataStatisticPack.exceptionCount || 0}
          warningLabelDesc="（所有设备）"
          abnormalLabelDesc="（所有设备）"
        ></AbnormalMsg>

        {/* 设备列表栏*/}
        <View className="flex-1 pt-24 overflow-hidden">
          <View className="h-full px-16 overflow-y-auto">
            {simpleDevInfo &&
              simpleDevInfo.devList.map(item => (
                <SimpleParamsCard
                  info={item.devDetailDataList}
                ></SimpleParamsCard>
              ))}
          </View>
        </View>
      </View>
    )
  }
}

export const NotHaveDevCard: React.FC<{}> = (): JSX.Element => {
  const {handleScan} = useContext(scanStore)

  return (
    <View className="flex-1 devCard flex">
      <View className="flex-1 w-full flex flex-col justify-center">
        <Image
          src={imagesUrl + 'notHaveDev.png'}
          className=" w-191 h-154 mx-auto mt-21 mb-12"
        ></Image>
        <View className="w-full h-20 mt-12 mb-23 mx-auto text-14 text-xx_text text-center">
          暂无设备, 请扫描设备二维码添加
        </View>
        <Image
          src={imagesUrl + 'btn-addDev.png'}
          className="w-255 h-48 mx-auto"
          onClick={() => handleScan()}
        ></Image>
      </View>
    </View>
  )
}
